<template>
  <ElTabs v-model="activeName" type="card" class="gen-preview">
    <ElTabPane v-for="item in data" :key="item.name" :lazy="true" :label="item.name" :name="item.name">
      <FlexScroller :content-scroll="false">
        <CodeEditor id="target" :value="item.code" />
      </FlexScroller>
      <ElButton
        id="btn"
        type="text"
        size="small"
        icon="el-icon-document-copy"
        class="gen-copy"
        @click="copyLink(item.v)">
        复制
      </ElButton>
    </ElTabPane>
  </ElTabs>
</template>

<script setup>
  import { preview } from '@/api/gen/gen'
  import { copy } from '@web-utils/core'
  import { ref, onBeforeMount } from 'vue'
  import { Message } from 'element-ui'

  const { queryData } = defineProps({
    queryData: {
      type: Object,
      default: () => {}
    }
  })

  const data = ref([])
  const activeName = ref('Entity.java')

  function copyLink(value) {
    copy(value, () => Message.success('复制成功'))
  }

  onBeforeMount(async () => {
    const res = await preview(queryData)
    const map = res.data.data
    for (const key in map) {
      const name = key.replace(/^template\/|.vm$/g, '')
      const code = map[key]
      const obj = { name, code }
      data.value.push(obj)
    }
  })
</script>

<style lang="scss">
  .gen-preview {
    height: 100%;

    @include flex-column;

    .el-tabs__header {
      @include flex-not-shrink;
    }

    .el-tabs__content {
      @include flex-item;

      .el-tab-pane {
        @include flex-column;
        height: 100%;
      }
    }

    .gen-copy {
      position: absolute;
      top: 20px;
      right: 10vh;
    }
  }
</style>
